<template>
  <div>
    <select v-model="selectedStation" @change="updateChart">
      <option v-for="station in stations" :key="station" :value="station">{{ station }}</option>
    </select>
    <button @click="batchIndex = 0; updateChart()" style="margin 10 20px">当前批次</button>
    <button @click="batchIndex = 1; updateChart()" style="margin 10 20px">下一个批次</button>
    <button @click="batchIndex = 2; updateChart()" style="margin 10 20px">下两个批次</button>
    <div style="margin-top: 30px;">
      <span style="display: inline-block; width: 20px; height: 20px; background-color: blue; margin-right: 10px;"></span>
      <span>计划执行</span>
      <span style="display: inline-block; width: 20px; height: 20px; background-color: red; margin-left: 20px; margin-right: 10px;"></span>
      <span>实际执行</span>
    </div>
    <div ref="ganttChart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'GanttChartAssessment',
  data() {
    return {
      chart: null,
      stations: ['Station1', 'Station2', 'Station3'],
      selectedStation: 'Station1',
      batchIndex: 0,
      stationData: {
        'Station1': [
          [
            { PAO: 'A260101', planStart: 4, planEnd: 5, actualStart: 4, actualEnd: 12 },
            { PAO: 'A260203', planStart: 0, planEnd: 4, actualStart: 5, actualEnd: 8 },
            { PAO: 'A260304', planStart: 0, planEnd: 3, actualStart: 6, actualEnd: 9 },
            { PAO: 'A260505', planStart: 1, planEnd: 2, actualStart: 10, actualEnd: 13 },
            { PAO: 'A260606', planStart: 0, planEnd: 1, actualStart: 2, actualEnd: 4 },
          ],
          [
            { PAO: '24A', planStart: 2, planEnd: 3 },
            { PAO: '25B', planStart: 1, planEnd: 2 },
            { PAO: '25A', planStart: 4, planEnd: 5 },
            { PAO: '26B', planStart: 6, planEnd: 7 },
            { PAO: '26A', planStart: 5, planEnd: 6 },
          ],
          [
            { PAO: '24A', planStart: 3, planEnd: 4 },
            { PAO: '25B', planStart: 2, planEnd: 3 },
            { PAO: '25A', planStart: 5, planEnd: 6 },
            { PAO: '26B', planStart: 7, planEnd: 8 },
            { PAO: '26A', planStart: 6, planEnd: 7 },
          ]
        ],
        'Station2': [
          [
            { PAO: '34A', planStart: 4, planEnd: 5, actualStart: 8, actualEnd: 10 },
            { PAO: '35B', planStart: 1, planEnd: 3, actualStart: 5, actualEnd: 9 },
            { PAO: '35A', planStart: 2, planEnd: 4, actualStart: 6, actualEnd: 8 },
            { PAO: '36B', planStart: 0, planEnd: 1, actualStart: 7, actualEnd: 11 },
            { PAO: '36A', planStart: 3, planEnd: 4, actualStart: 9, actualEnd: 12 },
          ],
          [
            { PAO: '34A', planStart: 2, planEnd: 3 },
            { PAO: '35B', planStart: 1, planEnd: 2 },
            { PAO: '35A', planStart: 4, planEnd: 5 },
            { PAO: '36B', planStart: 6, planEnd: 7 },
            { PAO: '36A', planStart: 5, planEnd: 6 },
          ],
          [
            { PAO: '34A', planStart: 3, planEnd: 4 },
            { PAO: '35B', planStart: 2, planEnd: 3 },
            { PAO: '35A', planStart: 5, planEnd: 6 },
            { PAO: '36B', planStart: 7, planEnd: 8 },
            { PAO: '36A', planStart: 6, planEnd: 7 },
          ]
        ],
        'Station3': [
          [
            { PAO: '44A', planStart: 3, planEnd: 5, actualStart: 7, actualEnd: 9 },
            { PAO: '45B', planStart: 0, planEnd: 2, actualStart: 6, actualEnd: 10 },
            { PAO: '45A', planStart: 1, planEnd: 3, actualStart: 8, actualEnd: 11 },
            { PAO: '46B', planStart: 4, planEnd: 5, actualStart: 9, actualEnd: 12 },
            { PAO: '46A', planStart: 2, planEnd: 4, actualStart: 5, actualEnd: 8 },
          ],
          [
            { PAO: '44A', planStart: 2, planEnd: 3 },
            { PAO: '45B', planStart: 1, planEnd: 2 },
            { PAO: '45A', planStart: 4, planEnd: 5 },
            { PAO: '46B', planStart: 6, planEnd: 7 },
            { PAO: '46A', planStart: 5, planEnd: 6 },
          ],
          [
            { PAO: '44A', planStart: 3, planEnd: 4 },
            { PAO: '45B', planStart: 2, planEnd: 3 },
            { PAO: '45A', planStart: 5, planEnd: 6 },
            { PAO: '46B', planStart: 7, planEnd: 8 },
            { PAO: '46A', planStart: 6, planEnd: 7 },
          ]
        ],
      },
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ganttChart);
      this.updateChart();
    },
    updateChart() {
      if (!this.stationData[this.selectedStation] || !this.stationData[this.selectedStation][this.batchIndex]) return;
      const data = this.stationData[this.selectedStation][this.batchIndex];
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return `${params.name}<br/>开始时间: ${params.value[0]}h<br/>结束时间: ${params.value[1]}h`;
          }
        },
        xAxis: {
          type: 'value',
          name: '装配时间/h',
          axisLabel: {
            textStyle: {
              color: 'red',
            },
            formatter: value => `${value}h`,
          },
          min: 0,
          max: 24,
           splitLine: { // 添加网格线
            show: true,
            lineStyle: {
              color: '#ccc'
            }
            },

        },
        yAxis: {
          type: 'category',
          name: 'AO名称',
          data: data.map(item => item.PAO),
          axisLabel: {
            textStyle: {
              color: 'blue',
            },
            splitLine: { // 添加网格线
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          },
        },
        series: [
          {
            itemStyle: {
              borderRadius: 10, // 设置圆角
              color: (params) => {
                return params.dataIndex % 2 === 0 ? 'blue' : 'red';
              },
            },
            type: 'custom',
            renderItem: (params, api) => {
              const categoryIndex = api.value(2);
              const start = api.coord([api.value(0), categoryIndex]);
              const end = api.coord([api.value(1), categoryIndex]);
              const height = api.size([0, 1])[1] * 0.5; // 每个任务条高度减少，给两个任务条留出空间

              return {
                type: 'rect',
                shape: echarts.graphic.clipRectByRect({
                  x: start[0],
                  y: start[1] - height,
                  width: end[0] - start[0],
                  height: height,
                  r: [5, 5, 5, 5], // 圆角
                }, {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height,
                }),
                style: api.style(),
              };
            },
            data: data.flatMap(item => [
              { name: `计划: ${item.PAO}`, value: [item.planStart, item.planEnd, item.PAO] },
              item.actualStart !== undefined ? { name: `实际: ${item.PAO}`, value: [item.actualStart, item.actualEnd, item.PAO] } : null,
            ]).filter(item => item),
            encode: {
              x: [0, 1],
              y: 2,
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
/* 确保容器的大小设置正确 */
div {
  width: 100%;
  height: 100%;
}

/* 自定义提示框的样式 */
.echarts-tooltip {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

</style>
